<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  <title>移动端HTML文档（富文本）编辑器 - Zx-Editor</title>
  <meta name="keyword" content="Zx-Editor,html-editor,editor">
  <meta name="description" content="移动端HTML文档（富文本）编辑器，支持图文混排、引用、大标题、无序列表，字体颜色、加粗、斜体。">
  <link rel="stylesheet" href="./css/index.css">
  <style type="text/css">
    .header-wrapper{background-color: #fff;border-bottom: 1px solid #e5e5e5;height: 50px;position: relative;width: 100%;}
    .header-wrapper .left-btn {position: absolute;left: 0;top: 0;z-index: 2;}
    .header-wrapper .left-btn img{width: 25px;height: auto;}
    .header-wrapper .center-btn {text-align: center;position: relative;}
    .header-wrapper .right-btn {position: absolute;right: 0;top: 0;text-align: right;}
    .header_title{font-weight: normal;color: #5f5f5f;line-height: 50px;font-size: 0.6rem;}

    .cover-wrapper{margin-top: 0;background: #3e3e3e;}
    .cover-wrapper .cover{min-height: 200px;margin: 10px;}
    .cover-wrapper .cover:after{background: url(./img/icon-video@3x.png) no-repeat 0 0;-webkit-background-size: auto 20px;background-size: auto 20px;content: '添加视频'}
    .border-bm{ border-bottom:1px dashed #eeeeee; }
    .title-wrapper .placeholder{ font-size:18px; }
    .title-wrapper .input-hook{ font-size:18px;  }
    article{display: none;}
    video{width: 100%;height: 15rem;}
  </style>
</head>
<body>
<div class="container"> 
  <section class="header-wrapper">
    <div class="left-btn">
      <div style="padding:15px 0px 0px 10px">
        <a onclick="javascript:void(0);"><img src="./img/back@2x.png"></a> 
      </div>
    </div>
    <div class="center-btn">
      <span class="header_title">视频</span>
    </div>
    <div class="right-btn">
      <div style="padding:15px 15px 0px 0px">
        <a href="javascript:handleSubmitClick();" style="font-size:18px;color:#FFB74F;text-decoration: none;">发布</a>
      </div>
    </div>
  </section>
  <section class="cover-wrapper">
    <div class="cover"><img src=""></div>
    <input type="file" accept="video/*" style="display: none">
  </section>
  <!--标题-->
  <section class="title-wrapper border-bm">
    <div class="item placeholder"><span>请输入标题...</span></div>
    <div class="item input-hook" contenteditable="true" style="display: none;"></div>
  </section>
  <!--导语、摘要-->
  <section class="summary-wrapper border-bm">
    <div class="item placeholder">输入摘要，140字内（非必填）</div>
    <div class="item input-hook" contenteditable="true" style="display: none;"></div>
  </section>
  <article>
    <div class="zx-eidtor-container" id="editorContainer"></div>
  </article>
</div>

<script type="text/javascript">
let video =document.createElement("video")
video.setAttribute('controls','controls')
video.setAttribute('crossOrigin','anonymous')
video.setAttribute('currentTime',5)
var imageParams = {
    width: 750,
    height: 422,
    // 强制裁剪图片，包括gif
    clip: true
  }

var $cover = document.querySelector('.cover-wrapper .cover');
var $input = document.querySelector('.cover-wrapper input');
var $img = $cover.querySelector('img');

$cover.addEventListener('click', function(){
    $input.click();
})

$input.addEventListener('change',function () {
    document.body.appendChild(video)
    video.src = window.URL.createObjectURL(this.files[0])
})
var imgHeight = 0,
imgWidth = 0,
videoWidth = 0,
videoHeight = 0,
//要截图的视频
// video = document.getElementById('video');

canvas = document.createElement("canvas");
canvasCtx = canvas.getContext("2d");

//视频准备好可以播放
video.addEventListener("canplay", function () {
    //获取展示的video宽高作为画布的宽高和临时视频截图的宽高
    canvas.width = imgWidth = video.offsetWidth;
    canvas.height = imgHeight = video.offsetHeight;
    //获取实际视频的宽高，相当于视频分辨率吧
    videoWidth = video.videoWidth;
    videoHeight = video.videoHeight;
    setTimeout(() => {
        video.pause();
          //坐原图像的x,y轴坐标，大小，目标图像的x，y轴标，大小。
          canvasCtx.drawImage(video, 0, 0, videoWidth, videoHeight, 0, 0, imgWidth, imgHeight);
          //把图标base64编码后变成一段url字符串
          var dataUrl = canvas.toDataURL("image/png");
          // let img= new Image()
          $img.src=dataUrl
          // console.log(img)
          // document.getElementByTagName('img').appendChild(img)
        
    }, 500);
    //防止拖动进度条的时候重复触发
    // video.removeEventListener("canplay", arguments.callee);
});

</script>

</body>